import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { getRandomInt } from '@/utils/int';
import styles from './style.scss';


const colorList = ['#ff4d4f', '#ff7a45', '#ffa940', '#ffc53d', '#ffec3d', '#bae637', '#73d13d', '#36cfc9', '#4096ff', '#597ef7', '#9254de', '#f759ab'];

export default function Card(props) {

  const color = React.useMemo(() => {
    const inx = getRandomInt(0, colorList.length);
    return colorList[inx];
  }, []);

  const { className, style, borderColor = color, children } = props;

  const compStyle = React.useMemo(() => {
    if (!borderColor) return style;

    return {
      ...style,
      borderTopWidth: '3px',
      borderTopColor: borderColor,
    }
  }, [borderColor, style])
  
  return (
    <View className={`${styles.card} ${className}`} style={compStyle}>
      {children}
    </View>
  );
}
